<template>
  <view class="detail-view">
    <view class="top-view clearfix">
      <view class="float_left">
        <view class="status-view">
          <text class="status-text">{{ order_detail.orderMsg }}</text>
          <u-icon name="arrow-right" size="40"></u-icon>
        </view>
        <view
          class="cancel-reson"
          v-if="
            [6, 7].includes(order_detail.orderStatus) &&
            order_detail.extends.cancelReason
          "
        >
          取消原因：{{ order_detail.extends.cancelReason || "无" }}
        </view>
      </view>
      <view
        class="float_right"
        v-if="order_detail.deliveryType === 2 && order_detail.verifyCode"
      >
        <u-icon name="tags-fill" color="#ffffff"></u-icon>
        <text style="margin-left: 10rpx">{{ order_detail.verifyCode }}</text>
      </view>
    </view>
    <view class="customer-view">
      <view class="title clearfix">
        <view class="float_left ellipsis" @click="copyOrderInfo">
          <text style="margin-right: 20rpx">{{
            order_detail.customerName
          }}</text>
          <u-icon
            color="#879BBA"
            margin-right="10"
            name="copy1"
            custom-prefix="custom-icon"
            size="28"
          ></u-icon>
        </view>
        <view class="float_right">
          <!-- <u-tag :text="order_detail.orderType === 23 ? '自提' : order_detail.deliveryName || '其他'" size="mini"
						type="primary" mode="plain" /> -->
          <view class="tag">{{
            order_detail.orderType === 23
              ? "自提"
              : order_detail.deliveryName || "其他"
          }}</view>
        </view>
      </view>
      <!-- 收货地址 -->
      <view
        class="delivery-view"
        v-if="order_detail.receiveData && order_detail.deliveryType !== 2"
      >
        <view class="name-top clearfix">
          <view class="float_left ellipsis">{{
            order_detail.receiveData.realName || "--"
          }}</view>
          <view
            class="float_right mobile"
            @click="callPhone(order_detail.receiveData.mobile)"
          >
            <text>{{ order_detail.receiveData.mobile || "--" }}</text>
            <!-- <u-icon name="arrow-right" size="22"></u-icon> -->
          </view>
        </view>
        <view v-if="order_detail.receiveData.area" class="address-view">
          {{ order_detail.receiveData.area.provinceName }}
          {{ order_detail.receiveData.area.cityName }}
          {{ order_detail.receiveData.area.districtName }}
          {{ order_detail.receiveData.address }}
        </view>
      </view>
      <!-- 自提点  -->
      <view
        class="delivery-view"
        v-if="
          order_detail.deliveryType === 2 && selfRuleData && selfRuleData.name
        "
      >
        <view class="name-top clearfix">
          <view class="float_left ellipsis">{{
            selfRuleData.name || "--"
          }}</view>
          <view
            class="float_right mobile"
            @click="callPhone(selfRuleData.mobile)"
          >
            <text>{{ selfRuleData.mobile || "--" }}</text>
            <u-icon name="arrow-right" size="22"></u-icon>
          </view>
        </view>
        <view class="address-view"
          >{{ selfRuleData.provinceName }} {{ selfRuleData.cityName }}
          {{ selfRuleData.districtName }} {{ selfRuleData.address }}</view
        >
        <view class="address-view" style="padding-bottom: 10rpx">
          营业时间：
          <text v-if="selfRuleData.startTime && selfRuleData.endTime"
            >{{ selfRuleData.startTime }}-{{ selfRuleData.endTime }}</text
          >
          <text v-else>全天</text>
          <text style="padding-left: 5px">{{
            selfRuleData.day.join(",")
          }}</text>
        </view>
      </view>
      <view class="remark clearfix">
        <view class="remark_text float_left">备注:</view>
        <view class="float_right">{{ order_detail.remark || "无" }}</view>
      </view>
    </view>
    <!-- <view v-if='order_detail.orderStatus === 6 && order_detail.extends.cancelReason' class="customer-view1"
			style="margin-top: 20rpx;">
			<view class="title clearfix">
				<view class="float_left ellipsis">取消原因</view>
			</view>
			<view class="remark">{{ order_detail.extends.cancelReason || '无' }}</view>
		</view> -->
    <view
      class="customer-view"
      style="margin-top: 20rpx"
      v-if="order_detail.deliveryType === 3 && order_detail.logisticsData"
    >
      <view class="title clearfix">
        <view class="float_left ellipsis">{{
          order_detail.logisticsData.name || "匿名司机"
        }}</view>
        <view class="float_right"
          ><u-tag text="车辆信息" size="mini" type="primary" mode="plain"
        /></view>
      </view>
      <!-- 收货地址 -->
      <view class="delivery-view">
        <view class="name-top clearfix">
          <view class="float_left ellipsis"
            >车牌号：{{ order_detail.logisticsData.truckName }}</view
          >
          <view
            class="float_right mobile"
            @click="callPhone(order_detail.logisticsData.truckTel)"
          >
            <text>{{ order_detail.logisticsData.truckTel || "--" }}</text>
            <u-icon name="arrow-right" size="22"></u-icon>
          </view>
        </view>
        <view class="address-view">{{
          order_detail.logisticsData.remark
        }}</view>
      </view>
    </view>

    <view class="detail-cont">
      <view class="info-li clearfix">
        <view class="label">订单编号</view>
        <view class="value" @click="copy(order_detail.no)">
          <u-icon
            color="#879BBA"
            margin-right="10"
            label-pos="left"
            :label="order_detail.no || '--'"
            name="copy1"
            custom-prefix="custom-icon"
            size="28"
          ></u-icon>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">下单时间</view>
        <view class="value">{{
          $u.timeFormat(order_detail.createTime, "yyyy-mm-dd hh:MM:ss")
        }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">出库状态</view>
        <view class="value">
          <text
            :class="[
              parseInt(order_detail.outStatus) === 4
                ? 'danger-status'
                : parseInt(order_detail.outStatus) === 5
                ? 'success-status'
                : parseInt(order_detail.outStatus) === 6
                ? 'warning-status'
                : 'primary-status',
            ]"
          >
            {{
              parseInt(order_detail.outStatus) === 4
                ? "未出库"
                : parseInt(order_detail.outStatus) === 5
                ? "已出库"
                : parseInt(order_detail.outStatus) === 6
                ? "部分出库"
                : "其他"
            }}
          </text>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">收款状态</view>
        <view class="value">
          <text
            :class="[
              parseInt(order_detail.payStatus) === 5
                ? 'success-status'
                : parseInt(order_detail.payStatus) === 3
                ? 'warning-status'
                : 'danger-status',
            ]"
          >
            {{
              parseInt(order_detail.payStatus) === 4
                ? "未收款"
                : parseInt(order_detail.payStatus) === 5
                ? "已收款"
                : "部分收款"
            }}
          </text>
          <text style="font-size: 22rpx" v-if="order_detail.payStatus === 3"
            >（剩余未支付¥{{ order_detail.notPayMoney }}）</text
          >
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">审核状态</view>
        <view class="value">
          <text
            :class="[
              parseInt(order_detail.auditStatus) === 1
                ? 'warning-status'
                : parseInt(order_detail.auditStatus) === 2
                ? 'success-status'
                : parseInt(order_detail.auditStatus) === 3
                ? 'danger-status'
                : parseInt(order_detail.auditStatus) === 4
                ? 'warning-status'
                : 'primary-status',
            ]"
          >
            {{
              parseInt(order_detail.auditStatus) === 1
                ? "待审核"
                : parseInt(order_detail.auditStatus) === 2
                ? "已通过"
                : parseInt(order_detail.auditStatus) === 3
                ? "已驳回"
                : parseInt(order_detail.auditStatus) === 4
                ? "审核中"
                : "其他"
            }}
          </text>
        </view>
      </view>
      <!-- 	<view v-if='order_detail.orderStatus === 6' class="info-li clearfix">
				<view class="label" label-position="top">取消原因
					<view>
						{{order_detail.extends.cancelReason}}
					</view>
				</view>
			</view> -->
      <view class="info-li clearfix">
        <view class="label">下单店铺</view>
        <view class="value">{{ order_detail.shopName }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">业务员</view>
        <view class="value">{{ order_detail.salesManName || "无" }}</view>
      </view>
      <block
        v-if="
          order_detail.extends &&
          order_detail.extends.bankData &&
          order_detail.extends.bankData.image
        "
      >
        <view class="info-li clearfix">
          <view class="label">账户名称</view>
          <view class="value">{{ order_detail.extends.bankData.name }}</view>
        </view>
        <view class="info-li clearfix">
          <view class="label">开户银行</view>
          <view class="value">{{
            order_detail.extends.bankData.bankName
          }}</view>
        </view>
        <view class="info-li clearfix">
          <view class="label">银行账号</view>
          <view class="value">{{
            order_detail.extends.bankData.accountNumber
          }}</view>
        </view>
        <view class="info-li clearfix">
          <view class="label">打款凭证</view>
          <view
            class="value"
            @click="previewImage(order_detail.extends.bankData.image)"
          >
            <image
              style="width: 150rpx; height: 200rpx"
              :src="order_detail.extends.bankData.image"
              mode="heightFix"
            ></image>
          </view>
        </view>
      </block>
    </view>
    <view class="goods-cont">
      <view class="goods-title">
        <view class="semicircle left-yuan"></view>
        <view class="semicircle right-yuan"></view>
        <text class="goods-title-text">{{ order_detail.shopName }}</text>
      </view>
      <view class="goods-ul">
        <view class="semicircle left-yuan"></view>
        <view class="semicircle right-yuan"></view>
        <view
          v-for="(item, index) in order_detail.goodsData"
          :key="index"
          class="goods-li clearfix"
        >
          <view class="goods-img float_left"
            ><image :src="item.images[0]" mode="aspectFill"></image
          ></view>
          <view class="float_left info">
            <view class="goods-name ellipsis">{{ item.goodsName }}</view>
            <view class="goods-num clearfix">
              <view class="float_left">
                规格：{{ item.unitName }};
                <block v-for="(itemS, indexS) in item.specGroup" :key="indexS"
                  >{{ itemS.specValueName }};</block
                >
              </view>
              <view class="float_right">
                购买数量：{{ $utils.formatNub(item.buyNum) }}
                <text v-if="item.isEq === 5 && item.u_1_buy > 0"
                  >({{ $utils.formatNub(item.u_1_buy) }}{{ item.u_1 }})</text
                >
              </view>
            </view>
            <view class="goods-num clearfix">
              <view class="float_left price">{{
                $utils.formattedNumber(item.price)
              }}</view>
              <view class="float_right">
                发货数量：
                <text style="color: #f67778">{{
                  $utils.formatNub(item.outNum)
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">商品总价</view>
        <view class="value">{{
          $utils.formattedNumber(order_detail.totalMoney)
        }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">运费</view>
        <view class="value">{{
          $utils.formattedNumber(order_detail.expressMoney)
        }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">订单优惠</view>
        <view class="value" style="color: #f67778">
          <text class="error-color">-</text>
          {{ $utils.formattedNumber(order_detail.orderPreferential) }}
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">优惠券优惠</view>
        <view class="value" style="color: #f67778">
          <text class="error-color">-</text>
          {{ $utils.formattedNumber(order_detail.preferential) }}
        </view>
      </view>
      <view class="info-li b-b clearfix">
        <view class="label">会员卡优惠</view>
        <view class="value" style="color: #f67778">
          <text class="error-color">-</text>
          {{ $utils.formattedNumber(order_detail.vipDiscount) }}
        </view>
      </view>
      <view
        class="info-li b-b clearfix"
        v-if="Number(order_detail.retMoney) !== 0"
      >
        <view class="label">退款金额</view>
        <view class="value">
          <text class="error-color">-</text>
          {{ $utils.formattedNumber(order_detail.retMoney) }}
        </view>
      </view>
      <block
        v-if="
          !order_detail.payTypeMsg &&
          order_detail.extends &&
          order_detail.extends.admixPayData &&
          order_detail.extends.admixPayData.length
        "
      >
        <view
          v-for="(item, index) in order_detail.extends.admixPayData"
          :key="index"
          class="info-li clearfix"
          :class="[index === 1 ? 'b-b' : '']"
        >
          <view class="label">{{ item.title }}</view>
          <view class="value">{{ $utils.formattedNumber(item.payMoney) }}</view>
        </view>
      </block>
      <view class="info-li clearfix total-pay-money">
        <view class="semicircle left-yuan"></view>
        <view class="semicircle right-yuan"></view>
        <view class="label money-label">实付总金额</view>
        <view class="value money-value">{{
          $utils.formattedNumber(order_detail.payAmount)
        }}</view>
      </view>
      <view class="info-li bottom-info clearfix">
        支付方式：
        <text v-if="order_detail.payTypeMsg">{{
          order_detail.payTypeMsg
        }}</text>
        <text v-else>
          <block
            v-if="order_detail.extends && order_detail.extends.admixPayData"
          >
            <text
              v-for="(item, index) in order_detail.extends.admixPayData"
              :key="index"
              >{{ item.title }};</text
            >
          </block>
        </text>
      </view>
      <view class="info-li bottom-info clearfix">
        订单来源：
        <text>
          {{
            parseInt(order_detail.source) === 1
              ? "ios"
              : parseInt(order_detail.source) === 2
              ? "安卓"
              : parseInt(order_detail.source) === 3
              ? "小程序"
              : parseInt(order_detail.source) === 4
              ? "后台创建"
              : parseInt(order_detail.source) === 5
              ? "H5页面"
              : parseInt(order_detail.source) === 6
              ? "pc页面"
              : parseInt(order_detail.source) === 8
              ? "字节跳动小程序"
              : "其他"
          }}
        </text>
        <image
          class="bl-line"
          src="../../static/img/img-bl-line.png"
          mode="aspectFill"
        ></image>
      </view>
    </view>
    <view class="btn-bottom-view clearfix">
      <block v-if="order_detail.orderMsg === '待审核'">
        <view
          v-if="$accessCheck($Access.orderQueryUpdateOrderStatus)"
          class="left-btn"
          @click="cancel"
        >
          <u-icon
            label-pos="bottom"
            margin-top="10rpx"
            custom-prefix="custom-icon"
            name="quxiaodingdan"
            color="#B8C0C8"
            label="取消订单"
            label-color="#62738E"
            label-size="20"
            size="40"
          ></u-icon>
        </view>
        <view
          v-if="$accessCheck($Access.orderQueryUpdateAuditStatus)"
          class="handel-btn"
          @click="openModel('确定要审核通过该订单吗？', '审核')"
          >审核</view
        >
        <view
          v-if="$accessCheck($Access.newOrderListEdit)"
          class="handel-btn info-btn"
          @click="
            goPage(
              `/pages/order/OrderAdd?id=${order_id}&userCenterId=${userCenterId}`
            )
          "
        >
          编辑订单
        </view>
      </block>
      <view
        v-if="
          $accessCheck($Access.orderQueryUpdateAuditStatus) &&
          order_detail.orderMsg === '待出库'
        "
        class="handel-btn info-btn"
        @click="openModel('确定要驳回审核该订单吗？', '驳回')"
      >
        驳回审核
      </view>
      <view
        class="handel-btn"
        v-if="order_detail.orderMsg === '部分出库'"
        @click="openModel('是否要再次出库？', '再次出库')"
        >再次出库</view
      >
      <view
        class="handel-btn"
        v-if="order_detail.orderMsg === '待取消'"
        @click="openCancelAuditpop"
        >取消审核</view
      >
      <view class="handel-btn info-btn" @click="toPrint">小票打印</view>
    </view>
    <u-modal
      v-model="model_show"
      :show-cancel-button="true"
      :content="model_content"
      @confirm="modelConfirm"
      @cancel="modelCancel"
    ></u-modal>
    <u-popup v-model="show" mode="bottom">
      <view class="pop-ul">
        <view class="sku-name">请输入取消订单原因</view>
        <view class="pop-li">
          <textarea
            style="width: 100%"
            placeholder-class="input-pl"
            placeholder="请输入"
            v-model="cancelReason"
          />
        </view>
        <view class="btn" @click="modelConfirm">确定</view>
      </view>
    </u-popup>
    <u-popup
      width="660"
      v-model="cancel_audit_show"
      mode="center"
      border-radius="10"
    >
      <view class="pop-ul">
        <view class="title">取消订单审核</view>
        <view class="desc">客户发起取消订单：23131</view>
        <view class="desc-tip"
          >是否同意客户取消订单，如果拒绝，请输入拒绝原因</view
        >
        <view class="pop-li" style="border: 0">
          <u-input
            placeholder-style="color:#CAD0D7;"
            v-model="cancelRejectReason"
            type="textarea"
            :border="true"
            :height="100"
            :auto-height="true"
          />
        </view>
        <view class="btn-view">
          <u-button
            @click="cancelReject"
            :custom-style="{ marginRight: '20rpx' }"
            type="error"
            size="medium"
            >拒绝</u-button
          >
          <u-button @click="cancelConfirm" type="primary" size="medium"
            >同意</u-button
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cancelRejectReason: "",
      cancel_audit_show: false,
      model_tag: "",
      model_show: false,
      model_content: "",
      order_id: 0,
      order_detail: {},
      selfRuleData: {},
      updata_istrue: false,
      cancle_istrue: false,
      userCenterId: false,
      show: false,
      cancelReason: "",
    };
  },
  onPullDownRefresh() {
    this.getOrderInfoById();
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  onLoad(options) {
    this.order_id = options.id;
    this.userCenterId = options.userCenterId;
  },
  onShow() {
    this.getOrderInfoById();
  },
  methods: {
    // 复制相应信息
    copyOrderInfo() {
      const data = this.order_detail;
      let goods = "";
      data.goodsData.forEach((item, index) => {
        goods =
          goods +
          item.goodsName +
          "（" +
          (Number(item.outNum) || Number(item.buyNum)) +
          "件）";
      });
      const copyInfo = `客户：${
        data.customerName
      }\n商品：${goods} \n客户电话：${data.customerMobile}\n业务员：${
        data.salesManName || "无"
      }\n备注：${data.remark || "无"}`;
      uni.setClipboardData({
        data: copyInfo,
        success: () => {
          this.$u.toast("内容已复制");
        },
      });
    },
    openCancelAuditpop() {
      this.cancel_audit_show = true;
    },
    // 详情
    getOrderInfoById() {
      this.$u.api
        .getOrderInfoById(this.userCenterId, {
          orderId: this.order_id,
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          this.order_detail = res.data;
          this.selfRuleData = JSON.parse(res.data.selfRuleData);
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    // 打开提示框
    openModel(content, tag) {
      this.model_content = content;
      this.model_show = true;
      this.model_tag = tag;
    },
    // 审核
    modelConfirm() {
      switch (this.model_tag) {
        case "取消订单":
          this.updateOrderStatus();
          break;
        case "审核":
          this.updateAuditStatus();
          break;
        case "驳回":
          this.revokeAudit();
          break;
        case "再次出库":
          this.reStockOut();
          break;
      }
    },
    modelCancel() {},
    // 取消订单
    updateOrderStatus() {
      this.$u.api
        .updateOrderStatus(this.order_detail.userCenterId, {
          orderId: this.order_detail.id,
          orderStatus: 6,
          cancelReason: this.cancelReason,
        })
        .then((res) => {
          this.$u.toast("取消成功");
          this.show = false;
          this.getOrderInfoById();
        });
    },
    // 审核订单
    updateAuditStatus() {
      this.$u.api
        .updateAuditStatus(this.order_detail.userCenterId, {
          orderId: this.order_detail.id,
          auditStatus: 2,
          audit: this.userInfo.name || "",
        })
        .then((res) => {
          this.$u.toast("审核成功");
          this.getOrderInfoById();
        });
    },
    // 驳回
    revokeAudit() {
      this.$u.api.revokeAudit(this.order_detail.id).then((res) => {
        this.$u.toast("驳回成功");
        this.getOrderInfoById();
      });
    },
    // 再次出库
    reStockOut() {
      this.$u.api.reStockOut(this.order_detail.id).then((res) => {
        this.$u.toast("出库成功");
        this.getOrderInfoById();
      });
    },
    previewImage(image) {
      // 预览图片
      uni.previewImage({
        urls: [image],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
        },
      });
    },
    // 单据小票打印
    toPrint() {
      this.$u.api
        .toPrint({
          objectId: this.order_detail.id,
          objectType: 1, // 销售单
        })
        .then((res) => {
          this.$u.toast("操作成功");
        });
    },
    cancel() {
      this.show = true;
      this.model_tag = "取消订单";
    },
    async cancelReject() {
      if (!this.cancelRejectReason) {
        this.$u.toast("请输入拒绝原因");
        return;
      }
      this.$u.api
        .updateOrderStatus(this.order_detail.userCenterId, {
          orderId: this.order_detail.id,
          orderStatus: 7,
          cancelRejectReason: this.cancelRejectReason,
        })
        .then((res) => {
          this.$u.toast(
            "您已拒绝客户的取消订单申请,原因是: " + this.cancelRejectReason
          );
          this.cancel_audit_show = false;
          this.getOrderInfoById();
        });
    },
    async cancelConfirm() {
      this.$u.api
        .updateOrderStatus(this.order_detail.userCenterId, {
          orderId: this.order_detail.id,
          orderStatus: 6,
          cancelReason: "工作人员同意客户主动的发起取消订单",
        })
        .then((res) => {
          this.cancel_audit_show = false;
          this.$u.toast("操作成功");
          this.getOrderInfoById();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-view {
  padding-bottom: 100rpx;
}

.top-view {
  background: linear-gradient(
    $uni-color-primary,
    $uni-color-primary,
    $uni-color-primary,
    #f5f5f6 100%
  );
  padding: 50rpx 30rpx 200rpx;
  color: #ffffff;
  font-size: 40rpx;

  .status-text {
    margin-right: 10rpx;
  }

  .float_right {
    font-size: 28rpx;
  }
  .float_left {
    padding-bottom: 20rpx;
  }
  .cancel-reson {
    font-size: 22rpx;
    line-height: 32rpx;
    opacity: 0.7;
    padding-top: 20rpx;
  }
}

.customer-view {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 auto;
  border-radius: 8rpx;
  transform: translateY(-200rpx);
  .title {
    padding: 32rpx 32rpx 24rpx;
    .float_left {
      font-size: 32rpx;
      font-weight: 600;
      width: calc(100% - 120rpx);
      color: #2d405e;
    }
    .float_right {
      .tag {
        width: 104rpx;
        height: 32rpx;
        background-color: rgb(218, 248, 242);
        color: #00c395;
        font-size: 20rpx;
        text-align: center;
        line-height: 32rpx;
      }
    }
  }

  .delivery-view {
    font-size: 26rpx;
    color: #879bba;
    margin: 0 32rpx;
    line-height: 36rpx;
    padding-bottom: 24rpx;
    .name-top {
      margin-bottom: 12rpx;
      .float_left {
        width: calc(100% - 220rpx);
      }
      .mobile {
        font-size: 28rpx;
        color: $uni-color-primary;
      }
    }
  }

  .remark {
    border-top: 1px solid #ecf0f7;
    line-height: 48rpx;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    .remark_text {
      color: #879bba;
      margin-right: 16rpx;
    }
    .float_right {
      width: 562rpx;
      color: #2d405e;
    }
  }
}

.detail-cont {
  width: 710rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 10rpx 0;
  overflow: hidden;
  transform: translateY(-182rpx);
  font-size: 28rpx;
  color: #2d405e;
  font-family: DINPro-Regular;

  .info-li {
    padding: 0 32rpx;
    line-height: 80rpx;
    .label {
      float: left;
      color: #879bba;
    }
    .value {
      float: right;
    }
    .money-label {
      font-weight: bold;
    }
    .money-value {
      font-family: DIN-Medium;
      font-size: 30rpx;
    }
  }

  .b-b {
    border-bottom: 1px solid #ecf0f7;
  }
}
.semicircle {
  position: absolute;
  width: 16rpx;
  height: 16rpx;
  background-color: #f5f5f6;
  border-radius: 100%;
  bottom: -8rpx;
  &.left-yuan {
    left: -10rpx;
  }
  &.right-yuan {
    right: -10rpx;
  }
}
.goods-cont {
  width: 710rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 8rpx;
  padding: 6rpx 0;
  transform: translateY(-166rpx);
  font-size: 28rpx;
  color: #2d405e;
  font-family: DINPro-Regular;
  .goods-title {
    background-color: #fff;
    line-height: 96rpx;
    width: 710rpx;
    color: #2d405e;
    font-size: 32rpx;
    border-bottom: 1rpx dashed #ecf0f7;
    font-weight: 600;
    position: relative;
    .goods-title-text {
      margin-left: 24rpx;
    }
  }

  .goods-ul {
    padding: 0 24rpx 30rpx;
    border-bottom: 1px dashed #ecf0f7;
    position: relative;
    .goods-li {
      padding-top: 24rpx;
      .goods-img {
        margin-right: 20rpx;
        image {
          width: 126rpx;
          height: 126rpx;
          border-radius: 14rpx;
          display: block;
        }
      }

      .info {
        .goods-name {
          width: 470rpx;
          -webkit-line-clamp: 2;
          color: #2d405e;
          font-size: 28rpx;
          font-weight: 600;
        }

        .goods-num {
          color: #62738e;
          line-height: 50rpx;
          font-size: 22rpx;
          width: 510rpx;

          .float_left {
            &.price {
              font-size: 28rpx;
              font-weight: bold;
              font-family: DIN-Medium;
              color: #fa6400;
            }
          }
        }
      }
    }
  }

  .info-li {
    padding: 0 32rpx;
    line-height: 80rpx;
    color: #879bba;
    .label {
      float: left;
    }

    .value {
      float: right;
    }

    .money-label {
      font-weight: bold;
      color: #2d405e;
    }

    .money-value {
      font-size: 30rpx;
      color: #2d405e;
      font-family: DIN-Medium;
    }
  }
  .total-pay-money {
    border-top: 1rpx dashed #ecf0f7;
    position: relative;
    .semicircle {
      top: -8rpx;
    }
  }
  .bottom-info {
    line-height: 70rpx;
    color: #b8c0c8;
    position: relative;
    font-weight: 400;
    .bl-line {
      position: absolute;
      display: block;
      width: 710rpx;
      height: 16rpx;
      bottom: -16rpx;
      left: 0;
    }
  }
}

.pop-ul {
  line-height: 90rpx;
  .sku-name {
    font-weight: bold;
    padding: 0 24rpx;
  }

  .pop-li {
    padding: 24rpx;
    border-top: 1px solid #ecf0f7;
  }

  .btn {
    width: 100%;
    text-align: center;
    color: #ffffff;
    line-height: 90rpx;
    background-color: $uni-color-primary;
  }
  .title {
    text-align: center;
    font-size: 28rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #ecf0f7;
  }
  .desc {
    font-size: 28rpx;
    line-height: 36rpx;
    padding-bottom: 10rpx;
    padding: 10rpx 20rpx 0;
  }
  .desc-tip {
    font-size: 24rpx;
    line-height: 36rpx;
    padding-bottom: 10rpx;
    padding: 10rpx 20rpx 0;
    color: #879bba;
  }
  .btn-view {
    text-align: center;
    padding: 20rpx 0;
  }
}

.btn-bottom-view {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 98rpx;
  background-color: #ffffff;
  padding: 0 38rpx;
  width: 100%;
  overflow: hidden;
  box-shadow: 0px -4rpx 32rpx 0px rgba(156, 170, 175, 0.16);
  .left-btn {
    margin-top: 10rpx;
    float: left;
  }
  .handel-btn {
    margin-left: 30rpx;
    margin-top: 20rpx;
    float: right;
    width: 164rpx;
    font-size: 26rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 32rpx;
    background-color: $uni-color-primary;
    border: 1rpx solid $uni-color-primary;
    color: #ffffff;
    &.info-btn {
      border: 1rpx solid #979797;
      background-color: transparent;
      color: #2d405e;
    }
  }
}
</style>
